<template>
    <div class="list-wrap">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>用户列表</span>
                </div>
            </template>
            <div class="tableBox">
                <el-table ref="multipleTableRef" border @selection-change="selectionChange" stripe v-loading="loading"
                    :data="tableData" style="width: 100%">
                    <el-table-column type="selection" show-overflow-tooltip />
                    <el-table-column prop="account" label="名称" width="180" />
                    <el-table-column prop="ctime" label="创建时间" width="180" />
                    <el-table-column prop="role" label="角色" width="180" />
                    <el-table-column prop="name" label="操作">
                        <template #default="scope">
                            <el-button size="small" @click="showDialog(scope.row)">编辑</el-button>
                            <el-popconfirm title="是否确定删除该账号?" @confirm="delSubmit(scope.row.id)">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBox">
                <el-pagination @current-change="currentPageChange" v-model:current-page="currentPage"
                    v-model:page-size="pageSize" :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled"
                    :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total" />
            </div>
            <div class="btnsBox">
                <el-button type="danger" @click="allDel">批量删除</el-button>
                <el-button @click="cancleAll">取消选择</el-button>
            </div>
        </el-card>

        <el-dialog v-model="dialogVisible" title="编辑账号" width="350px">
            <el-form label-width="80px">
                <el-form-item label="账户名">
                    <el-input v-model="editFormData.account" placeholder="输入添加的账号"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="editFormData.role" placeholder="选择角色">
                        <el-option label="管理员" value="admin" />
                        <el-option label="普通员工" value="normal" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="editSubmit">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import $_ from 'lodash'
import { ref, shallowRef, reactive, toRaw } from 'vue';
import { _userList, _userEdit, _userDel, _userBatchdel } from "@/api/users";
import dayjs from "dayjs";
import usePagination from "@/hooks/pagination";
import { ElMessage } from 'element-plus'
import { ElTable } from 'element-plus'

console.log(66, $_);



let tableData = shallowRef([])
let dialogVisible = ref(false)
let editFormData = ref<userEditSubmitData>({
    "account": "",
    "role": "",
    "id": ""
})



let {
    currentPage,
    total,
    pageSize,
    small,
    disabled,
    background,
    currentPageChange
} = usePagination(getData)
const loading = ref(false)

// 刚进入页面就发送请求渲染
getData()

// 获取数据
async function getData() {
    // 发送请求前打开等待动画
    loading.value = true
    let res = await _userList({
        currentPage: currentPage.value,
        pageSize: pageSize.value
    })
    // 处理时间
    res.data.data.forEach((item: any) => {
        let newTime = dayjs(item.ctime).format('YYYY-MM-DD') // '25/01/2019'
        item.ctime = newTime
    });

    tableData.value = res.data.data
    total.value = res.data.total
    loading.value = false
}

// 打开弹窗
let showDialog = (row: any) => {
    editFormData.value = $_.cloneDeep(row);
    dialogVisible.value = true

    // 深拷贝
    // 1.JSON.parse
    // 2.循环+递归的方式，自己封装深拷贝函数
    // 3.使用第三方的函数库   cloneDeep
}

// 编辑账号
let editSubmit = async () => {
    let data = {
        account: editFormData.value.account,
        role: editFormData.value.role,
        id: editFormData.value.id
    }

    console.log(data);
    let res = await _userEdit(data)
    if (res.data.code == 0) {
        ElMessage({
            message: res.data.msg,
            type: 'success',
        })

        dialogVisible.value = false

        getData()
    }
}

// 删除账号
let delSubmit = async (id: string) => {
    console.log(id);
    let res = await _userDel({
        id
    })
    if (res.data.code == 0) {
        ElMessage({
            message: res.data.msg,
            type: 'success',
        })
        getData()
    }
}



let ids = ref("")
// 多选框监听
let selectionChange = (selection: any) => {
    let arr = selection.map((item: any) => item.id)
    ids.value = JSON.stringify(arr)
    console.log(ids.value);

}

// 批量删除请求
let allDel = async () => {
    let res = await _userBatchdel({
        ids: ids.value
    })
    if (res.data.code == 0) {
        ElMessage({
            message: res.data.msg,
            type: 'success',
        })

        getData()
    }
}


const multipleTableRef = ref<InstanceType<typeof ElTable>>()

// 取消选择
let cancleAll = () => {
    multipleTableRef.value?.clearSelection()
}
</script>

<style scoped lang="scss">
.list-wrap {
    .el-input {
        width: 200px;
    }
}

.pageBox {
    margin: 20px 0;

}
</style>